<template>
  <div class="center_bottom">
    <Echart :options="options" id="bottomLeftChart" class="echarts_bottom"></Echart>
  </div>
</template>

<script>
import { get } from "api";
import echarts from "echarts";
export default {
  data() {
    return {
      options: {}
    };
  },
  props: {
    infoData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    infoData: {
      handler(newData) {
        this.init(newData); // 重新渲染图表
      },
      deep: true
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      // this.pageflag = true;
      // get("/admin/alarmCount").then(res => {
      //   if (res.code == 200) {
          this.init(this.infoData);
      //   } else {
      //     this.pageflag = false;
      //     this.$Message({
      //       text: res.msg,
      //       type: "warning"
      //     });
      //   }
      // });
    },
    init(newData) {
      let color = [
        "#0090FF",
      ];

      let xAxisData = newData.map(v => v.name);
      let yAxisData1 = newData.map(v => v.value);
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      };
      this.options = {
        color: color,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          top: 20,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#7C8491"
              }
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 40
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#7C8491"
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "广告牌新增曲线",
            type: "line",
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8
              }
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3)
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1)
                    }
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10
              }
            },
            data: yAxisData1
          }
        ]
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
